<template>
  <view class="echarts-container" :style="{ height: chartHeight }">
    <qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
  </view>
</template>

<script setup lang="ts">
import { defineProps, ref, watch } from 'vue';

interface RingDataItem {
  name: string;
  value: number;
  labelShow?: boolean;
}

interface ChartSeries {
  data: RingDataItem[];
}

interface ChartData {
  series: ChartSeries[];
}

const props = defineProps({
  chartData: {
    type: Object as () => ChartData,
    required: true,
  },
});

// 图表高度
const chartHeight = ref<string>('260rpx'); // 默认高度

// 图表配置选项
const opts = ref({
  rotate: false, // 是否可旋转
  rotateLock: false, // 是否锁定旋转
  // 颜色数组，按顺序对应数据项
  color: [
    '#05BDF7', // 道路积水颜色
    '#FFCE40', // 防洪方案颜色
    '#6CD06A', // 内涝事件颜色
    '#CDDEE1', // 潮位报警颜色
    '#AA88FF', // 人员聚集颜色
    '#FF6347', // 暴露垃圾颜色
    '#32CD32', // 非法摆摊颜色
    '#FFA07A', // 店外经营颜色
    '#FFD700', // 占道经营颜色
    '#8A2BE2', // 乱堆物堆料颜色
    '#20B2AA', // 打包垃圾颜色
    '#FF8C00', // 垃圾箱满溢颜色
  ],
  padding: [5, 5, 5, 5], // 图表内边距[上,右,下,左]
  dataLabel: false, // 是否显示数据标签
  enableScroll: false, // 是否启用滚动
  // 图例配置
  legend: {
    show: true, // 显示图例
    position: 'right', // 图例位置(right/left/top/bottom)
    lineHeight: 25, // 图例行高
    icon: 'square', // 将图例图标改为方形
    formatter: (name: string, value: number) => `${name}: ${value}`, // 自定义格式，显示名称和值
  },
  // 标题配置
  title: {
    name: '事件类型', // 主标题文本
    fontSize: 15, // 主标题字体大小
    color: '#666666', // 主标题颜色
  },
  // 副标题配置
  subtitle: {
    name: '', // 副标题文本(空字符串表示不显示)
    fontSize: 25, // 副标题字体大小
    color: '#7cb5ec', // 副标题颜色
  },
  // 额外配置
  extra: {
    // 环形图特有配置
    ring: {
      ringWidth: 15, // 环的宽度
      activeOpacity: 0.5, // 激活时透明度
      activeRadius: 10, // 激活时半径增量
      offsetAngle: 0, // 起始角度偏移
      labelWidth: 15, // 标签宽度
      border: true, // 是否显示边框
      borderWidth: 3, // 边框宽度
      borderColor: '#FFFFFF', // 边框颜色
    },
    // 图例额外配置
    legend: {
      show: false, // 显示图例
      position: 'right', // 图例位置
      align: 'center', // 对齐方式
    },
    // 数据标签配置
    dataLabel: {
      show: false, // 显示数据标签
      position: 'pie', // 标签位置
      formatter: '{b}: {c} ({d}%)', // 标签格式(b:名称,c:值,d:百分比)
      fontSize: 13, // 字体大小
      color: '#333333', // 字体颜色
    },
    // 环形标注配置
    annularLabel: {
      show: false, // 显示标注
      position: 'outside', // 标注位置
      formatter: '{d}%', // 标注格式(显示百分比)
      fontSize: 14, // 字体大小
      fontWeight: 'bold', // 字体粗细
      color: '#FF0000', // 字体颜色
      backgroundColor: '#FFFFFF', // 背景色
      borderColor: '#FF0000', // 边框颜色
      borderWidth: 1, // 边框宽度
      borderRadius: 3, // 边框圆角
      padding: [3, 5], // 内边距[垂直,水平]
    },
  },
});

// 监听 chartData 的变化，动态调整图表高度
watch(
  () => props.chartData.series[0].data.length,
  (newLength) => {
    console.log('newLength', newLength);
    if (newLength > 0) {
      chartHeight.value = `${200 + newLength * 40}rpx`; // 根据数据项数量调整高度
    } else {
      chartHeight.value = '260rpx'; // 数据为空时设置默认高度
    }
  },
  { immediate: true }
);
</script>

<style scoped>
.echarts-container {
  width: 65%;
  height: 100%;
}
</style>
